<template>
  <el-container>
    <el-aside
      v-if="layout === 'side' && showAside()"
      :class="getAsideClassName()"
    >
      <sidebar
        :is-collapse="isCollapse"
        :layout="layout"
      />
    </el-aside>

    <el-header
      v-if="layout === 'mix' && showHeader()"
      :class="getHeaderClassName()"
    >
      <navbar
        :is-collapse="isCollapse"
        :layout="layout"
      />
    </el-header>

    <el-container
      :class="[
        `${namespace}-container__${layout} ${namespace}-container__${useMultipleNav?.value ? 'multiple-nav' : 'default'}`,
        showHeader() ? `${namespace}-container__show-header` : ''
      ]"
    >
      <el-header
        v-if="layout !== 'mix' && showHeader()"
        :class="getHeaderClassName()"
      >
        <navbar
          :is-collapse="isCollapse"
          :layout="layout"
        />
      </el-header>

      <el-aside
        v-if="layout === 'mix' && showAside()"
        :class="getAsideClassName()"
      >
        <sidebar
          :is-collapse="isCollapse"
          :layout="layout"
        />
      </el-aside>

      <section
        v-if="layout !== 'mix' && useMultipleNav && $route.path !== '/error/401'"
        class="nav-tag-list"
      >
        <multiple-nav />
      </section>

      <el-main :class="[`${namespace}-main__${layout} ${useMultipleNav ? 'mul-nav-main' : ''}`]">
        <section
          v-if="layout === 'mix' && useMultipleNav && $route.path !== '/error/401'"
          class="nav-tag-list"
        >
          <multiple-nav />
        </section>

        <breadcrumb
          v-if="layout === 'top' && useBreadcrumb && !useMultipleNav"
          :layout="layout"
          :class="[`breadcrumb__${layout}`]"
        />

        <el-main
          v-if="layout === 'mix'"
          :class="[useMultipleNav ? 'mul-nav-main' : '']"
        >
          <breadcrumb
            v-if="useBreadcrumb && !useMultipleNav"
            :layout="layout"
            :class="`breadcrumb__${layout}`"
          />
          <the-router-view />
        </el-main>
        <the-router-view v-else />
      </el-main>
    </el-container>
    <section
      v-if="!(route.query?.layout || SessionStorageService.get('_layout'))"
      :class="[
        `maia-layout-setting-wrap ${drawerDisplay ? 'close' : ''}`
      ]"
    >
      <span
        v-if="drawerDisplay"
        class="btn"
        @click="drawerDisplayChange(2);"
      >
        <base-svg-icon
          icon-class="icon-close"
        />
      </span>
      <span
        v-else
        class="btn"
        @click="drawerDisplayChange(1);"
      >
        <base-svg-icon
          icon-class="icon-setting"
        />
      </span>
    </section>
    <setting-drawer :visible="drawerDisplay" />
  </el-container>
</template>

<script setup lang="ts" name="layout">

import { computed, ref, watch } from 'vue';

import { useRoute } from 'vue-router';

import Breadcrumb from './components/breadcrumb/index.vue';
import MultipleNav from './components/multiple-nav/index.vue';
import Navbar from './components/navbar/index.vue';
import TheRouterView from './components/router-view/index.vue';
import SettingDrawer from './components/setting-drawer/index.vue';
import Sidebar from './components/sidebar/index.vue';

import { useResize } from '@/hooks/index';
import { useAppStore } from '@/store/app';
import { SessionStorageService } from '@/utils/storage';

const namespace = import.meta.env.VITE_APP_NAME_SPACE;

const appStore = useAppStore();
const route = useRoute();
const drawerDisplay = ref(false);
const isCollapse = ref();

// layout 从参数或者配置文件中获取，解决模板官网预览跳转问题
if (route.query?.layout) {
  SessionStorageService.set('_layout', route.query?.layout);
}
const layout = computed(() => route.query?.layout || SessionStorageService.get('_layout') || appStore.layout);

// useMultipleNav 从参数或者配置文件中获取，解决模板官网预览跳转问题
if (route.query?.useMultipleNav) {
  SessionStorageService.set('_use_multiple_nav', route.query?.useMultipleNav);
}
const useMultipleNav = computed(() => {
  if (route.query?.useMultipleNav) {
    return route.query?.useMultipleNav === 'true';
  }
  if (SessionStorageService.get('_use_multiple_nav')) {
    return SessionStorageService.get('_use_multiple_nav') === 'true';
  }
  return appStore.useMultipleNav;
});

const useHeader = computed(() => appStore.useHeader);
const useSidebar = computed(() => appStore.useSidebar);
const useBreadcrumb = computed(() => appStore.useBreadcrumb);

const showAside = () => !route.meta.hideAside && useSidebar.value;
const showHeader = () => !route.meta.hideHeader && useHeader.value;

const drawerDisplayChange = (status: number) => {
  if (status === 1) {
    drawerDisplay.value = true;
  } else if (status === 2) {
    drawerDisplay.value = false;
  }
};

/**
   * @description: 获取左侧导航类名，第一次进入系统不加动效
   */
const getAsideClassName = () => {
  if (isCollapse.value === true) {
    return `collapse aside__maia-${appStore.sidebarBackground}`;
  }
  if (isCollapse.value === false) {
    return `no-collapse aside__maia-${appStore.sidebarBackground}`;
  }
  return `aside__maia-${appStore.sidebarBackground}`;
};

/**
   * @description: 获取顶部导航类名
   */
const getHeaderClassName = () => `header__maia-${appStore.navbarBackground}`;

watch(
  () => appStore.collapse,
  (newValue) => {
    isCollapse.value = newValue;
  }
);

useResize();
</script>
